<template>
	<!-- 我的有优惠券模块 -->
	<!-- <view :style="colorStyle">
		<view class="navbar acea-row row-around">
			<view class="item acea-row row-center-wrapper" :class="{ on: navOn === 1 }" @click="onNav(1)">未使用12</view>
			<view class="item acea-row row-center-wrapper" :class="{ on: navOn === 2 }" @click="onNav(2)">已使用/过期</view>
		</view>
		<view class='coupon-list' v-if="couponsList.length">
			<view class='item acea-row row-center-wrapper' v-for='(item,index) in couponsList' :key="index"
				:class="{svip: item.receive_type === 4}" @click="useCoupon(item)">
				<view class="moneyCon acea-row row-center-wrapper">
					<view class='money' :class='item._type == 0 ? "moneyGray" : ""'>
						<view><text v-if="item.coupon_type==1">￥</text><text class='num'>{{item.coupon_type==1?item.coupon_price:parseFloat(item.coupon_price)/10}}</text><text v-if="item.coupon_type==2">折</text></view>
						<view class="pic-num" v-if="item.use_min_price > 0">满{{item.use_min_price}}元可用</view>
						<view class="pic-num" v-else>无门槛券</view>
					</view>
				</view>
				<view class='text'>
					<view class='condition'>
						<view class="name line2">
							<view class="line-title acea-row row-center-wrapper" :class="item._type === 0 ? 'bg-color-huic' : 'bg-color-check'"
								v-if="item.applicable_type === 0">通用券</view>
							<view class="line-title acea-row row-center-wrapper" :class="item._type === 0 ? 'bg-color-huic' : 'bg-color-check'"
								v-else-if="item.applicable_type === 1">品类券</view>
							<view class="line-title acea-row row-center-wrapper" :class="item._type === 0 ? 'bg-color-huic' : 'bg-color-check'"
								v-else>商品券</view>
							<image src="../../../static/images/fvip.png" class="pic" v-if="item.receive_type===4">
							</image>
							<text class="title">{{item.coupon_title}}</text>
						</view>
					</view>
					<view class='data acea-row row-between-wrapper'>
						<view>{{item.add_time}}-{{item.end_time}}</view>
						<view class='bnt gray' v-if="item._type==0">{{item._msg}}</view>
						<view class='bnt bg-color' v-else>{{item._msg}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class='noCommodity' v-if="!couponsList.length && page === 2">
			<view class='pictrue'>
				<image :src="imgHost + '/statics/images/noCoupon.png'"></image>
			</view>
		</view>
		<home v-if="navigation"></home> -->

	<!-- </view> -->
	<view class="wrap">
		<view class="list-box " v-for="(item, index) in list" :key="index">
			<view class="li">
				<view class="bg-img">
					<image src="@/static/images/coupon-icon1.png" v-if="!item.status"></image>
					<image src="@/static/images/coupon-overdue.png" v-if="item.status"></image>
				</view>
				<view class="li-content flex">
					<view class="li-l flex">
						<view class="l-img">
							<image v-if="!item.status" src="@/static/images/coupon-icon2.png" ></image>
							<image v-else src="@/static/images/coupon-overdue2.png"></image>
							<view class="discounts-box" :class="{failureSty: item.status}">
								<view class="discounts-price">
									¥<text>{{ item.coupon_price }}</text>
								</view>
								<view class="discounts-tit">
									{{ item.type }}
								</view>
							</view>
						</view>
						<view class="l-info" :class="{failureSty: item.status}">
							<view class="">
								<view class="info-tit">
									{{ item.coupon_title }}
								</view>
								<view class="deadline">
									{{ item._add_time }} 至 {{ item._end_time }}内有效
								</view>
							</view>
							<view class="instructions flex" @click="toggleTips(index)">
								<text>使用说明</text>
								<u-icon 
									:name="item.tipsShow ? 'arrow-up' : 'arrow-down'" 
									color="#999999" 
									size="24"
								></u-icon>
							</view>
						</view>
					</view>
					<view class="li-btn" :class="{'overdue': item.status}" @click="goRouter">
						{{ !item.status ? '立即使用' : '过期/失效' }}
					</view>
				</view>
			</view>
			<view class="tips-box" v-if="item.tipsShow">
				仅限提前还款使用，每次限用一张。
			</view>
		</view>
		<u-empty mode="list" v-if="!list.length" text="暂无数据..." textSize="28" iconSize="120">
		</u-empty>
		<u-loadmore marginTop="20" fontSize="28" v-if="list.length" :status="loadStatus" loading-text="努力加载中"
			loadmore-text="轻轻上拉" nomore-text="没有更多啦~" />
		<!-- #ifdef MP -->
		<authorize v-if="isShowAuth" @authColse="authColse" @onLoadFun="onLoadFun"></authorize>
		<!-- #endif -->
	</view>
</template>

<script>
	// import {
	// 	getUserCoupons
	// } from '@/api/api.js';
	import {
		couponList
	} from "@/api/coupon.js"
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	// import home from '@/components/home';
	import colors from '@/mixins/color.js';
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	export default {
		components: {
			// home
		},
		mixins: [colors],
		data() {
			return {
				// couponsList: [],
				// loading: false,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				// navOn: 1,
				// page: 1,
				// limit: 15,
				// finished: false,
				// imgHost:HTTP_REQUEST_URL

				currentPage: 1,
				list: [], // 优惠卷列表
				loadStatus: "nomore", // load 状态
			};
		},
		computed: mapGetters(['isLogin']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						// #ifdef H5 || APP-PLUS
						this.getUseCoupons();
						// #endif
					}
				},
				deep: true
			}
		},
		onLoad() {
			if (this.isLogin) {
				// this.getUseCoupons();
				this.getCouponList();
			} else {
				// #ifdef H5 || APP-PLUS
				toLogin()
				// #endif
				// #ifdef MP
				this.isShowAuth = true;
				// #endif
			}
		},
		onShow() {
			uni.removeStorageSync('form_type_cart');
		},

		methods: {
			/* 点击使用 */
			goRouter() {
				uni.navigateTo({
					url: `/pages/lease/my-bill`
				})
			},
			/* 查看优惠卷说明 */
			toggleTips(index) {
				this.list[index].tipsShow = !this.list[index].tipsShow
				this.$forceUpdate();
			},
			onReachBottom() {
				if (this.loadStatus == "nomore") return
				this.loadStatus = "loading"
				this.currentPage++;
				this.getCouponList();
			},
			// onNav: function(type) {
			// 	this.navOn = type;
			// 	this.couponsList = [];
			// 	this.page = 1;
			// 	this.finished = false;
			// 	this.getUseCoupons();
			// },
			// useCoupon(item){
			// 	let url = '';
			// 	if (item.category_id == 0 && item.product_id == '') {
			// 		url = '/pages/goods/goods_list/index?title=默认'
			// 	}
			// 	if (item.category_id != 0) {
			// 		if (item.category_type == 1) {
			// 			url = '/pages/goods/goods_list/index?cid='+item.category_id+'&title='+item.category_name
			// 		}else{
			// 			url = '/pages/goods/goods_list/index?sid='+item.category_id+'&title='+item.category_name
			// 		}
			// 	}
			// 	if (item.product_id != '') {
			// 		let arr = item.product_id.split(',');
			// 		let num = arr.length;
			// 		if (num == 1) {
			// 			url = '/pages/goods_details/index?id='+item.product_id
			// 		} else {
			// 			url = '/pages/goods/goods_list/index?productId='+item.product_id+'&title=默认'
			// 		}
			// 	}
			// 	uni.navigateTo({
			// 		url: url
			// 	});
			// },
			/**
			 * 授权回调
			 */
			onLoadFun: function() {
				// this.getUseCoupons();
				this.list = [];
				this.currentPage = 1;
				this.getCouponList();
				this.isShowAuth = false;
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			/* 获取优惠卷列表 */
			getCouponList() {
				couponList({
					page: this.currentPage,
					limit: 20,
				}).then(res => {
					if (res.data < 20) {
						this.loadStatus = "loadmore"
					} else {
						this.loadStatus = "nomore"
					}
					this.list = [...this.list, ...res.data]
					this.list.map(item => item.tipsShow = false)
				})
			},
			/**
			 * 获取领取优惠券列表
			 */
			// getUseCoupons: function() {
			// 	let that = this;
			// 	if (that.loading || that.finished) {
			// 		return;
			// 	}
			// 	that.loading = true;
			// 	uni.showLoading({
			// 		title: '正在加载…'
			// 	});
			// 	getUserCoupons(this.navOn, {
			// 		page: this.page,
			// 		limit: this.limit
			// 	}).then(res => {
			// 		that.loading = false;
			// 		uni.hideLoading();
			// 		that.couponsList = that.couponsList.concat(res.data);
			// 		that.finished = res.data.length < that.limit;
			// 		that.page += 1;
			// 	}).catch(err => {
			// 		that.loading = false;
			// 		uni.showToast({
			// 			title: err,
			// 			icon: 'none'
			// 		});
			// 	});
			// }
		}
	}
</script>
<style lang="scss" scoped>
	.wrap {
		padding: 0 20rpx 40rpx;
		border-top: 1px solid #FAFAFA;
		background-color: #fff;
		min-height: 100vh;
		
		.list-box {
			.tips-box {
				padding: 20rpx;
				background: #F5F7FA;
				border-radius: 16rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #1F1F1F;
				line-height: 40rpx;
				margin-top: 10rpx;
			}
			.li {
				height: 200rpx;
				margin-top: 30rpx;
				padding: 30rpx 20rpx;
				// justify-content: space-between;
				// align-items: center;
				position: relative;

				.bg-img {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 200rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.li-content {
					align-items: center;
					justify-content: space-between;
					position: relative;

					.li-l {
						width: 75%;

						.l-img {
							width: 136rpx;
							height: 136rpx;
							margin-right: 40rpx;
							position: relative;

							image {
								width: 100%;
								height: 100%;
							}

							.discounts-box {
								width: 100%;
								height: 100%;
								position: absolute;
								top: 0;
								left: 0;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								padding: 25rpx 0 20rpx;
								text-align: center;

								.discounts-price {
									font-size: 28rpx;
									font-family: Alibaba-PuHuiTi-M, Alibaba-PuHuiTi;
									font-weight: normal;
									color: #B85716;
									line-height: 40rpx;
									font-weight: bold;

									text {
										font-size: 40rpx;
									}
								}

								.discounts-tit {
									font-size: 24rpx;
									font-family: PingFangSC-Medium, PingFang SC;
									font-weight: 500;
									color: #FFFFFF;
									line-height: 24rpx;
								}
							}

							.failureSty {
								.discounts-price {
									color: #666666;
								}

								.discounts-tit {
									color: #999999;
								}
							}
						}

						.l-info {
							.info-tit {
								font-size: 32rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: bold;
								color: #1F1F1F;
								line-height: 32rpx;
							}

							.deadline {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #666666;
								line-height: 24rpx;
								margin-top: 20rpx;
							}

							.instructions {
								text {
									margin-right: 10rpx;
								}

								font-size: 24rpx;
								font-family: PingFangSC-Regular,
								PingFang SC;
								font-weight: 400;
								color: #999999;
								line-height: 24rpx;
							}

							display: flex;
							flex-direction: column;
							justify-content: space-between;
						}

						.failureSty {
							.info-tit {
								color: #666666;
							}

							.deadline {
								color: #999999;
							}
						}
					}

					.li-btn {
						// width: 30%;
						// background-color: #ccc;
						width: 160rpx;
						height: 72rpx;
						background: linear-gradient(135deg, #FF9D5C 0%, #FF6933 100%);
						border-radius: 44rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 24rpx;
						text-align: center;
						line-height: 72rpx;
					}

					.overdue {
						background: linear-gradient(135deg, #E0E0E0 0%, #B8B8B8 100%);
						color: #FFFFFF;
					}
				}
			}
		}
	}

	/* -- old 到此 -- */
	// .money {
	// 	display: flex;
	// 	flex-direction: column;
	// 	justify-content: center;
	// }

	// .pic-num {
	// 	color: #ffffff;
	// 	font-size: 24rpx;
	// }

	// .coupon-list .item .text .condition {
	// 	display: flex;
	// 	align-items: center;
	// }

	// .coupon-list .item .text .condition .name {
	// 	font-size: 26rpx;
	// 	font-weight: 500;
	// }

	// .coupon-list .item .text .condition .pic {
	// 	width: 30rpx;
	// 	height: 30rpx;
	// 	display: block;
	// 	margin-right: 10rpx;
	// 	display: inline-block;
	// 	vertical-align: sub;
	// }

	// .condition .line-title {
	// 	width: 70rpx;
	// 	height: 32rpx !important;
	// 	/* #ifndef APP */
	// 	line-height: 28rpx;
	// 	/* #endif */
	// 	/* #ifdef APP */
	// 	line-height: 30rpx;
	// 	/* #endif */
	// 	text-align: center;
	// 	box-sizing: border-box;
	// 	background: var(--view-minorColorT);
	// 	border: 1px solid var(--view-theme);
	// 	opacity: 1;
	// 	border-radius: 20rpx;
	// 	font-size: 18rpx !important;
	// 	color: var(--view-theme);
	// 	margin-right: 12rpx;
	// 	text-align: center;
	// 	display: inline-block;
	// 	vertical-align: middle;
	// }

	// .condition .title{
	// 	vertical-align: middle;
	// }

	// .condition .line-title.bg-color-huic {
	// 	border-color: #BBB !important;
	// 	color: #bbb !important;
	// 	background-color: #F5F5F5 !important;
	// }
	// .navbar {
	// 	position: fixed;
	// 	top: 0;
	// 	left: 0;
	// 	width: 100%;
	// 	height: 106rpx;
	// 	background-color: #FFFFFF;
	// 	z-index: 9;

	// 	.item {
	// 		border-top: 5rpx solid transparent;
	// 		border-bottom: 5rpx solid transparent;
	// 		font-size: 30rpx;
	// 		color: #999999;

	// 		&.on {
	// 			border-bottom-color: var(--view-theme);
	// 			color: #282828;
	// 		}
	// 	}
	// }

	// .coupon-list {
	// 	margin-top: 122rpx;
	// }

	// .noCommodity {
	// 	margin-top: 300rpx;
	// }
</style>